<!-- 
 @Author: LW  
 @Date: 2021-01-14 11:38:15  
 @function: 图片剪切、上传插件  
 -->
<template>
  <div class="updateAvatar">
    <el-row>
      <el-col :span="24" style="height: 320px;">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
        ></vue-cropper>
        <div class="btnS">
          <el-upload
            ref="uploadCropper"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
            action="/"
            style="margin-right: 10px;"
          >
            <el-button type="primary" size="small">选择图片</el-button>
          </el-upload>
          <el-tooltip class="item" effect="dark" content="向左旋转" placement="top">
            <el-button size="small" @click="rotateLeft">
              <i class="el-icon-refresh-left"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="向右旋转" placement="top">
            <el-button size="small" @click="rotateRight">
              <i class="el-icon-refresh-right"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="放大" placement="top">
            <el-button size="small" @click="changeScale(1)">
              <i class="el-icon-plus"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
            <el-button size="small" @click="changeScale(-1)">
              <i class="el-icon-minus"></i>
            </el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="关闭框口" placement="top">
            <el-button size="mini" @click="closeDialog()">关闭框口</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="确定上传" placement="top">
            <el-button size="mini" type="primary" :loading="loading" @click="submitForm()">确定上传</el-button>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
    <div slot="footer " class="el-dialog__footer"></div>
  </div>
</template>
 
<script>
import { VueCropper } from "vue-cropper";
import http from "@/utils/http";
const { httpRequest } = http;

export default {
  name: "updateAvatar",
  components: {
    VueCropper
  },
  props: {
    imageUploadInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: true,
      options: {
        // servicePath: "",
        // uploadFolder: "",
        // originalPic:"",
        img: "", //裁剪图片的地址
        info: true, //裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 200, //默认生成截图框宽度
        autoCropHeight: 200,
        fixedBox: true, // 固定截图框大小 是否允许改变
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [1, 1], //截图框的宽高比例
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      previews: {},
      loading: false,
      fileList: [],
      uploadAccept: ["jpeg", "jpg", "png"]
    };
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    this.options.autoCropWidth = this.imageUploadInfo.width;
    this.options.autoCropHeight = this.imageUploadInfo.height;
  },
  methods: {
    //实时预览函数
    realTime(data) {
      this.previews = data;
    },
    beforeAvatarUpload(file) {
      //此处的上传file有多种处理方式
      let type = file.type.split("/")[1];
      if (this.uploadAccept.indexOf(type) > -1) {
        //上传允许的类型之内
        const reader = new FileReader();
        //把Array Buffer转化为blob 如果是base64不需要
        //转化为base64
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      } else {
        this.$messageTip.warning("您上传的图片格式不符，请重新上传");
      }
    },
    changeScale(num) {
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    //取消
    closeDialog() {
      this.$emit("callBack", null);
    },
    //上传图片
    submitForm() {
      this.loading = true;
      if (this.options.img != "") {
        this.$refs.cropper.getCropData(base64 => {
          this.uploadImg(base64);
        });
      } else {
        this.loading = false;
         this.$messageTip.warning("请上传选择上传图片");
      }
    },
    uploadImg(base64) {
      let par = {
        imageBase64: base64,
        servicePath: this.imageUploadInfo.servicePath,
        uploadFolder: this.imageUploadInfo.uploadFolder,
        originalPic: this.imageUploadInfo.originalPic
      };
      this.uploadImage(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          let backData={
              data:data.Data,
              imageUploadInfo:this.imageUploadInfo
          };
          this.$emit("callBack",backData);
        } else {
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    //获取部门列表信息
    uploadImage(par) {
      return httpRequest({
        baseURL: this.$store.getters.fileServerURI,
        url: "/api/Files/UploadImageNoRemove",
        method: "POST",
        modal: false,
        data: par
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btnS {
  display: flex;
  padding-top: 10px;
  .i {
    position: relative;
    font-size: 12px;
  }
}
.upload-preview {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  box-shadow: 0 0 4px #eaeaea;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>